<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .search{
        padding: 12px 20px;
        border:  2px solid #d1d5db;
        border-radius: 999px;
        width: 200px;
        transition: all .3s ease;
    }
    .search:focus{
        border-color: #4f46e5;
        width: 300px;
        box-shadow: 0 0 5px rgba(79,70,299,0.5);
        outline: none;
    }
</style>

<input type="text" class="search" placeholder="Search" value=""/>
</body>
</html>